<script setup lang="ts">
import ruleItem from './ruleItem.vue'
defineProps(['item', 'showConditionObj', 'operatorMap'])
</script>

<template>
  <div class="row">
    <template v-if="['AND', 'OR'].includes(item.operator)">
      <div class="hd">{{ item.operator }}</div>
      <div class="col">
        <div class="row" v-for="(row, i) in item.conditions" :key="i">
          <rule-item :item="row" :showConditionObj="showConditionObj" :operatorMap="operatorMap" />
        </div>
      </div>
    </template>
    <template v-else>
      <div class="title">{{ showConditionObj[item.id].name }}</div>
      <div class="option">{{ operatorMap[item.operator] }} {{ item.value }}</div>
    </template>
  </div>
</template>

<style scoped lang="less">
.title {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px;
  background-color: #fff;
}
.option {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px;
  background-color: #fff;
}
.hd {
  height: 100%;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background-color: #fff;
}
.row {
  display: flex;
  flex-direction: row;
  gap: 2px;
}
.col {
  display: flex;
  flex-direction: column;
  background-color: #00a9ff;
  gap: 2px;
}
</style>
